<template>
  <g class="circle" v-tap.stop="handleTap" v-track.stop="handleTrack">
    <circle class="display" :cx="offsetX" :cy="offsetY" :r="3 / Math.max(scale, 1)"></circle>
  </g>
</template>

<script>
export default {
  name: "PolygonPoint",
  props: {
    pointId: {
      type: Number,
      default: -1
    },
    offsetX: {
      type: Number,
      default: 0
    },
    offsetY: {
      type: Number,
      default: 0
    }
  },
  computed: {
    scale() {
      return this.$store.state.canvas.scale;
    }
  },
  methods: {
    handleTap(event) {
      event.detail.pointId = this.pointId;
      this.$emit("tap", event);
    },
    handleTrack(event) {
      event.detail.pointId = this.pointId;
      this.$emit("track", event);
    }
  }
};
</script>

<style scoped>
.circle {
  cursor: crosshair;
  pointer-events: fill;
}
.display {
  fill: #398a01;
}
</style>